<script lang="ts" setup>
import { type Button01ComponentMeta, JumpConsultMethod, JumpType } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderButton01.less'

defineOptions({
  name: 'RenderButton01',
})
const props = defineProps<{
  render: Button01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('main')">
      <!-- item for loop -->
      <template v-for="item of render.config.items" :key="item.id">
        <!-- 无链接 -->
        <div
          v-if="(item.jumpType as any) === JumpType.None" :class="prefix('btn')"
          :style="{ background: item.color, borderRadius: `${platform === 'mobile' ? item.radius : item.radiusPc}px` }"
        >
          {{ item.text }}
        </div>
        <!-- 非咨询 -->
        <a
          v-else-if="(item.jumpType as any) !== JumpType.Consult" :class="prefix('btn')"
          :style="{ background: item.color, borderRadius: `${platform === 'mobile' ? item.radius : item.radiusPc}px` }" target="_blank" :href="item.jumpUrl"
        >{{ item.text }}
        </a>
        <!-- 咨询(JumpType.Consult)类型处理 -->
        <!-- 具体咨询跳转处理逻辑详见`JumpConsultMethod`上方注释 -->
        <!-- item.jumpUrl是经过处理的, 格式：`[method, content].join(',')` -->
        <div
          v-else-if="Number(item.jumpUrl?.split(',')[0]) === JumpConsultMethod.MeiQia" :class="[prefix('btn'), prefix('designer-meiqia')]"
          :style="{ background: item.color, borderRadius: `${platform === 'mobile' ? item.radius : item.radiusPc}px` }"
        >
          {{ item.text }}
        </div>
        <!-- 电话 -->
        <a
          v-else-if="Number(item.jumpUrl?.split(',')[0]) === JumpConsultMethod.DianHua" :class="prefix('btn')"
          :style="{ background: item.color, borderRadius: `${platform === 'mobile' ? item.radius : item.radiusPc}px` }" :href="`tel:${item.jumpUrl?.split(',')[1]}`"
        >{{ item.text }}
        </a>
        <!-- 其他 -->
        <a
          v-else :class="prefix('btn')"
          :style="{ background: item.color, borderRadius: `${platform === 'mobile' ? item.radius : item.radiusPc}px` }" target="_blank" :href="item.jumpUrl?.split(',')[1]"
        >{{ item.text }}
        </a>
      </template>
    </div>
  </div>
</template>
